export function styles(): string {
  const height = '6px'
  const thumbSize = '20px'

  return `
    .custom-range-slider {
      all: initial !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
      
      input[type="range"] {
        flex: 1 !important;
        height: ${thumbSize} !important;
        -webkit-appearance: none !important;
        background: transparent !important;
        
        &:focus {
          outline: none !important;
        }
        
        &:disabled {
          cursor: not-allowed !important;
          opacity: 0.5 !important;
          
          + .slider-controls {
            opacity: 0.5 !important;
          }
        }
        
        &::-webkit-slider-runnable-track {
          width: 100% !important;
          height: ${height} !important;
          cursor: pointer !important;
          background: #ced4da !important;
          border-radius: 4px !important;
        }
        
        &::-webkit-slider-thumb {
          -webkit-appearance: none !important;
          height: ${thumbSize} !important;
          width: ${thumbSize} !important;
          border-radius: 50% !important;
          background: #0d6efd !important;
          cursor: pointer !important;
          margin-top: calc(-${thumbSize}/2 + ${height}/2) !important;
          transition: all 0.2s ease !important;
        }
        
        &:hover::-webkit-slider-thumb {
          transform: scale(1.1) !important;
        }
      }
      
      .slider-controls {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      
      .value-display {
        min-width: 50px !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
        background: #f8f9fa !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        border: 1px solid #dee2e6 !important;
      }
      
      .step-buttons {
        display: flex !important;
        gap: 4px !important;
      }
      
      .step-button {
        all: unset !important;
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8f9fa !important;
        border-radius: 4px !important;
        border: 1px solid #dee2e6 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
      }
      
      .step-button:hover {
        background: #e9ecef !important;
        transform: translateY(-1px) !important;
      }
      
      .step-button:active {
        transform: translateY(0) !important;
      }
      
      .step-button svg {
        fill: #495057 !important;
      }
      
      /* 滑块轨道样式 */
      input[type="range"]::-webkit-slider-runnable-track {
        width: 100% !important;
        height: 6px !important;
        cursor: pointer !important;
        background: #dee2e6 !important;
        border-radius: 3px !important;
      }
      
      /* 滑块拇指样式 */
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        height: 18px !important;
        width: 18px !important;
        border-radius: 50% !important;
        background: #0d6efd !important;
        cursor: pointer !important;
        margin-top: -6px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        transition: all 0.2s ease !important;
      }
      
      input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.1) !important;
        background: #0b5ed7 !important;
      }
    }
  `
}
